<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <div v-if="d_login">
        <div class="login-center"><h2>管理员登录</h2></div>
        <div class="login-center"><el-input v-model="user_name" placeholder="请输入用户名" ></el-input></div>
        <div class="login-center"><el-input v-model="user_pwd" placeholder="请输入密码"></el-input></div>
        <div class="login-center"><el-button type="primary" @click="login">登录</el-button></div>
    </div>
    <div v-if="d_main" class="main-center">
        <h1 style="text-align: center;">悠悠笛声管理后台</h1>
        <el-tabs type="border-card" @tab-click="table_click">
            <el-tab-pane label="用户管理" >
                <el-table
                    :data="table_users"
                    style="width: 100%">
                    <el-table-column
                      prop="createdAt"
                      label="创建时间">
                    </el-table-column>
                    <el-table-column
                      prop="user_id"
                      label="用户ID">
                    </el-table-column>
                    <el-table-column
                      prop="openid"
                      label="openid">
                    </el-table-column>
                    <el-table-column
                      label="操作">
                        <template slot-scope="scope">
                            <el-button @click="lock_user(scope.row)" type="text" size="small">锁定</el-button>
                            <el-button @click="unlock_user(scope.row)" type="text" size="small">解锁</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="page-top"
                    background
                    layout="total, prev, pager, next"
                    @current-change="user_page_changed"
                    :total="user_totals">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="琴笛管理" >
                <el-table
                    :data="table_voices"
                    style="width: 100%">
                    <el-table-column
                      prop="createdAt"
                      label="创建时间">
                    </el-table-column>
                    <el-table-column
                      prop="user_id"
                      label="用户ID">
                    </el-table-column>
                    <el-table-column
                      prop="title"
                      label="曲名">
                    </el-table-column>
                    <el-table-column
                      prop="content"
                      label="心情">
                    </el-table-column>
                    <el-table-column
                      prop="enabled"
                      label="状态">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="声音">
                      <template slot-scope="scope">
                          <audio :src="base_voice_url + scope.row.name" controls="controls"></audio>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="操作">
                        <template slot-scope="scope">
                            <el-button @click="lock_voice(scope.row)" type="text" size="small">锁定</el-button>
                            <el-button @click="unlock_voice(scope.row)" type="text" size="small">解锁</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="page-top"
                    background
                    layout="total, prev, pager, next"
                    @current-change="voice_page_changed"
                    :total="voice_totals">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="待审核的琴笛" >
              <el-table
                  :data="unvalid_voices"
                  style="width: 100%">
                  <el-table-column
                    prop="createdAt"
                    label="创建时间">
                  </el-table-column>
                  <el-table-column
                    prop="user_id"
                    label="用户ID">
                  </el-table-column>
                  <el-table-column
                    prop="title"
                    label="曲名">
                  </el-table-column>
                  <el-table-column
                    prop="content"
                    label="心情">
                  </el-table-column>
                  <el-table-column
                    prop="enabled"
                    label="状态">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="声音">
                    <template slot-scope="scope">
                        <audio :src="base_voice_url + scope.row.name" controls="controls"></audio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作">
                      <template slot-scope="scope">
                          <el-button @click="lock_voice(scope.row)" type="text" size="small">锁定</el-button>
                          <el-button @click="unlock_voice(scope.row)" type="text" size="small">解锁</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <el-pagination
                  class="page-top"
                  background
                  layout="total, prev, pager, next"
                  @current-change="unvalid_voice_page_changed"
                  :total="unvalid_voice_totals">
              </el-pagination>
          </el-tab-pane>
        </el-tabs>
    </div>
    <el-dialog :visible.sync="visible" title="登录">
      <p>登录失败</p>
    </el-dialog>
  </div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    new Vue({
        el: '#app',
        data: function() {
            return {
                d_login: true,
                d_main: false,
                visible: false,
                token: '',
                user_name: '',
                user_pwd: '', 
                table_users: [],
                user_totals: 0,
                current_user_page: 1,
                table_voices: [],
                voice_totals: 0,
                current_voice_page: 1,
                unvalid_voices: [],
                unvalid_voice_totals: 0,
                current_unvalid_voice_page: 1,
                base_voice_url: "https://www.yunt.top/dizi/voices/voice?name=",
            }
        },
        methods: {
            login: function(e) {
                console.log(e);
                console.log(this.user_name);
                console.log(this.user_pwd);
                let that = this;
                axios.post("https://www.yunt.top/dizi/admin/login", {
                    user: this.user_name,
                    password: this.user_pwd,
                }).then(function(ret) {
                    console.log("admin login ret ", ret);
                    if(ret.data.errcode) {
                      that.visible = true;
                      return;
                    }
                    that.d_login = false;
                    that.d_main = true;
                    that.token = ret.data.token;
                    that.get_users();
                }).catch(function(err) {
                    console.log("admin login error ", err);
                    that.visible = true;
                })
            },
            get_users: function() {
              let that = this;
              console.log("get users");
              axios.get("https://www.yunt.top/dizi/admin/users", {
                params: {
                  token: that.token,
                  offset: (that.current_user_page - 1) * 10,
                  limit: 10,
                }
              }).then(function(ret) {
                console.log("get users ret ", ret);
                if(ret.data.errcode) {
                  return;
                } else {
                  that.user_totals = ret.data.count;
                  that.table_users = ret.data.rows;
                }
              }).catch(function(err) {
                console.log("get users error ", err);
              })
            },
            get_voices: function() {
              let that = this;
              console.log("get voices");
              axios.get("https://www.yunt.top/dizi/admin/voices", {
                params: {
                  token: that.token,
                  offset: (that.current_voice_page - 1) * 10,
                  limit: 10,
                }
              }).then(function(ret) {
                console.log("get voices ret ", ret);
                if(ret.data.errcode) {
                  return;
                } else {
                  that.voice_totals = ret.data.count;
                  that.table_voices = ret.data.rows;
                }
              }).catch(function(err) {
                console.log("get voices error ", err);
              })
            },
            get_unvalid_voices: function() {
              let that = this;
              console.log("get unvalid voices");
              axios.get("https://www.yunt.top/dizi/admin/voices", {
                params: {
                  token: that.token,
                  offset: (that.current_voice_page - 1) * 10,
                  limit: 10,
                  enabled: 0,
                }
              }).then(function(ret) {
                console.log("get unvalid voices ret ", ret);
                if(ret.data.errcode) {
                  return;
                } else {
                  that.unvalid_voice_totals = ret.data.count;
                  that.unvalid_voices = ret.data.rows;
                }
              }).catch(function(err) {
                console.log("get unvalid voices error ", err);
              })
            },
            lock_user: function(row) {
                console.log(row);
            },
            unlock_user: function(row) {
                console.log(row);
            },
            lock_voice: function(row) {
                let that = this;
                axios.put('https://www.yunt.top/dizi/admin/voices', {
                    token: that.token,
                    name: row.name,
                    enabled: 0,
                }).then(function(ret) {
                    console.log('lock voice ret', ret);
                }).catch(function(err) {
                    console.log("lock voice error with ", err);
                })
            },
            unlock_voice: function(row) {
                let that = this;
                axios.put('https://www.yunt.top/dizi/admin/voices', {
                    token: that.token,
                    name: row.name,
                    enabled: 1,
                }).then(function(ret) {
                    console.log('unlock voice ret', ret);
                }).catch(function(err) {
                    console.log("unlock voice error with ", err);
                })
            },
            user_page_changed: function(current_page) {
                console.log(current_page);
                this.current_user_page = current_page;
                this.get_users();
            },
            voice_page_changed: function(current_page) {
                console.log(current_page);
                this.current_voice_page = current_page;
                this.get_voices();
            },
            unvalid_voice_page_changed: function(current_page) {
                console.log(current_page);
                this.current_unvalid_voice_page = current_page;
                this.get_unvalid_voices();
            },
            table_click: function(t) {
              console.log("table click ", t.label);
              if(t.label === "琴笛管理") {
                this.get_voices();
                return;
              }
              if(t.label === "用户管理") {
                this.get_users();
                return;
              }
              if(t.label === "待审核的琴笛") {
                this.get_unvalid_voices();
                return;
              }
            },
        }
    })
</script>
<style type="text/css">

.login-center {
    display: flex;
    justify-content: center;
    flex-direction:row;
    align-items:center;
    margin: 15px 40%;
}

.main-center {
    margin: 15px 10%;
}

.page-top {
    margin-top: 30px;
}
</style>
</html>
